<template>

  <div v-if="dataSource.list!=null && dataSource.list.length==0 && !loading">
    <NoData :msg= NoDataMsg></NoData>
  </div>

  <div class="skeleton" v-if="loading">
    <el-skeleton :rows="5" animated/>
  </div>
  <div v-for="item in dataSource.list" :key="item.articleId" v-else>
    <slot :data="item"></slot>
  </div>
  <div class="pagination">
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="dataSource.pageSize"
      :pager-count="7"
      :total="Number(dataSource.totalCount)"
      :current-page="dataSource.pageNo"
      @current-change="handlePageNoChange"
    ></el-pagination>
  </div>
</template>

<script setup>
import NoData from './NoData.vue';


const props = defineProps({
    dataSource:{
        type : Object
    },
    loading:{
        type:Boolean,
    },
    NoDataMsg:{
        type:String,
        default:'空空如也'
    }
})

const emit = defineEmits(['pageNoChange','loadData'])
const handlePageNoChange =(pageNo)=>{
    props.dataSource.pageNo = pageNo;
    emit("pageNoChange")
    
}
</script>

<style lang="scss">
.pagination{
  padding: 5px;
}
</style>